<!-- 赛事预览 -->
<template>
	<div id="competition">
		<div id="cptt-main">
			<div>
				<img :src="cptt.url" alt="图片没了" height="60px" title="图片">
			</div>
			<div id="cpttname" @click="seeDetails">
				<p>{{ cptt.name }}</p>
			</div>
			<div id="cptt-bm">
				<el-button 
				:type="cptt.state? 'primary':cptt.isGoing? 'success':'danger' " 
				:disabled="!(cptt.state || cptt.isGoing)"
				@click="seeDetails"
				>
					{{stateinfo(cptt.state,cptt.isGoing)}}
				</el-button>
				<br>
			</div>
		</div>
		<span v-if="cptt.state" id="cptt-endtime">
			报名倒计时=> 
			<van-count-down 
			:time="cptt.time" 
			millisecond 
			format="DD天 HH:mm:ss:SS" 
			:style="{color:cptt.time<24*60*60*1000? 'red':'black'}"
			/>
		</span>
		
	</div>
	
</template>


<script>
import { Toast } from 'vant'
export default{
	name:"competition",
	props:["cptt"],
	data(){
		// const time = new Date(this.cptt.overtime) - new Date();
		return{
			// time,
		}
	},
	created() {
		
	},
	methods:{
		stateinfo(i,j) {
			 if(i === true)
				return "点击查看";
			 else if(j === true)
				return "点击观赛"
			 return "报名截止";
		},
		seeDetails(){
			// alert("..")
			Toast.loading({
			  message: 'loading...',
			  forbidClick: true,
			  duration:500,
			});
			let url = "/"
			if(this.cptt.state)
				url = '/eventDetails?id='+this.cptt.id
			else if(this.cptt.isGoing)
				url = '/watch?id='+this.cptt.id
			setTimeout(()=>{
				this.$router.push(url);
			},500)
			
		}
	}
	
}
</script>

<style lang="scss">
	#competition
	{
		background-color: #b0b0b0;
		border-radius: 10px;
		text-align: right;
		#cptt-main{
			display: flex;
			flex-flow: row ;
			align-items:center;
			justify-content:space-around;
			margin-top: 5px;
			div{
				padding-top: 8px;
			}
			#cpttname{
				text-align: left;
				width: 40%;
				p{
					font-size: 20px;
					font-weight: 700;
				}
			}
			#cptt-bm{
				// align-self: flex-end;
			}
		}
		
		
		#cptt-endtime{
			// float: right;
			display: inline-block;
			white-space: nowrap;
			// top:-20px;
			transform: translate(-5%,-40%);
			.van-count-down{
				display: inline-block;
			}
		}
	}
</style>
